/**
 * 抽象对象：tab 对象
 * 1. 该对象具有切换功能
 * 2. 添加tab签功能
 * 3. 删除tab签功能
 * 4. 修改tab签相关内容功能
 */
// var that

class Tab {
  constructor(id){
    that = this
    // 获取相关元素
    this.main = document.querySelector(id)  //tab
    this.ul = this.main.querySelector('.fisrstnav ul:first-child')
    this.add = this.main.querySelector('.tabadd')
    this.fsection = this.main.querySelector('.tabscon')

    

    this.init()
  }
  // 初始化：相关元素绑定事件
  init(){
    this.updateNode()
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i
      // this.lis[i].onclick = function () {
      //   // 这里边的this 指的是 this.lis
      //   console.log(this.index);
      // }
      this.lis[i].onclick = this.toggleTab.bind(this.lis[i],this) // 赋予点击事件后不能家小括号“()”,否则会直接调用
      this.iconGuanbi[i].onclick = this.removeTab.bind(this.iconGuanbi[i],this) // 赋予点击事件后不能家小括号“()”,否则会直接调用
      // 给所有li中的第一span增加双击事件
      this.spans[i].ondblclick = this.editTab
      this.sections[i].ondblclick = this.editTab

    }

    this.add.onclick = this.addTab(this.add,this)
  }

  // 动态添加元素需要重新获取元素- 获取所有的小li 和sections
  updateNode(){
    this.lis = this.main.querySelectorAll('li') //所有li选项卡
    this.sections = this.main.querySelectorAll('section') //所有选项卡内容
    this.iconGuanbi = this.main.querySelectorAll('.icon-guanbi')

    this.spans = this.main.querySelectorAll('.fisrstnav li span:first-child')
  } 


  // 清除样式
  clearClass(){
    for (let i = 0; i < this.lis.length; i++) {
      this.lis[i].className = ''
      this.sections[i].className = ''
    }
  }

  // 切换
  toggleTab(that){
    // 这里的this指的是调用本方法的实例，并不一定是类对象，可能是某个dom对象
    that.clearClass()
    console.log(this.index)
    this.className = 'liactive'
    // 这里的this值得是 this.lis 对象，如果调用sections的话要是用 this对象
    // 所以使用初始化保留this的值 that 代替
    that.sections[this.index].className = 'conactive'
  }
  // 添加
  addTab(that){
    console.log(this);
    let li = `<li class="liactive"><span>测试XX</span><span class="iconfont icon-guanbi"></span></li>`
    let section = `<section  class="conactive">测试XX</section>`
    that.clearClass()
    that.ul.insertAdjacentHTML('beforeend',li)
    that.fsection.insertAdjacentHTML('beforeend',section)
    // 调用初始化-新增dom需要重新初始化并绑定事件
    that.init()
  }
  // 删除
  removeTab(that,e){
    // 阻止冒泡，防止父级li点击事件触发
    e.stopPropagation()

    let index = this.parentNode.index //获取删除按钮的父级li的index属性
    console.log(index);
    // 根据索引号删除对应的 li 和 section ,remove方法可以直接删除指定元素
    that.lis[index].remove()
    that.sections[index].remove()

    that.init()
    // 通过是否还能获取 已选中属性 liactive，判断删除的是否是选中属性，
    // 如果还能获取选中属性，证明删除的不是 
    if (document.querySelector('.liactive')) return

    // 当删除里选中状态的li的时候，让它前一个li处于选中状态
    index--
    // 手动调用点击事件
    that.lis[index] && that.lis[index].click() //&&符号前边是真，才会执行&&后边

  }
  // 修改
  editTab(){
    let innerStr = this.innerHTML
    // 双击禁止选中文字
    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();

    this.innerHTML = `<input type="text" value="${innerStr}"/>`
    let input = this.children[0]
    input.value = innerStr
    input.select() //让文本框中的文字赋予选中状态
    input.onblur = function () {
      this.parentNode.innerHTML = this.value
    }

    input.onkeyup = function(e){
      if(e.keyCode === 13){
        // 手动代用表单失去焦点操作
        this.blur()
      }
    }

  }

}

var tab = new Tab('#tab')
